<template>
	<view>
		<view class="">
			<view class="infobox">
				<view class="infoname">收货人</view>
				<input type="text" placeholder="请输入收货人" v-model="name" />
			</view>
			<view class="infobox">
				<view class="infoname">手机号码</view>
				<input type="text" placeholder="请输入手机号码" v-model="phone" />
			</view>
			<view class="infobox">
				<view @click="showcity" class="infocity">所在地区 <up-icon name="arrow-right"></up-icon></view>
				<input type="text" :disabled="true" placeholder="请选择省/市/区" v-model="city" />
			</view>
			<view class="infobox">
				<view class="infoname">详细信息</view>
				<input type="text" placeholder="请输入详细信息" v-model="addres" />
			</view>
			<view class="inforess">
				<view class="">设为默认地址</view>
				<up-switch v-model="value1" @change="moren"></up-switch>
			</view>
		</view>
		<view class="sares" @click="addrecity">保存地址</view>
		<!-- <view class="sares1" @click="delress">删除地址</view> -->
		<up-picker :show="show" :columns="columns" keyName="name" closeOnClickOverlay="true" @cancel="cancel"@close="close" mode="region" @confirm="confirm" @change="distChangeHandler" ref="uPickerRef"></up-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import request from '../../utils/request';
import stepsItem from '../../uni_modules/uview-plus/components/u-steps-item/stepsItem';
	onMounted(() => {

		token.value = uni.getStorageSync('token')
		const options = getCurrentPages().pop().options;
		if (options && options.id) {
			venueId.value = decodeURIComponent(options.id)
			console.log(venueId.value);
			request.post('Transport/read', {
				data: {
					id: venueId.value
				},
				header: {
					"token": token.value
				}
			}).then(res => {
				console.log(res);
				name.value = res.data.realname
				phone.value = res.data.mobile
				city.value = `${res.data.province}${res.data.city}${res.data.district}`
				addres.value = res.data.address
				num.value = res.data.status
				area.value=res.data.area
				if (num.value == 1) {
					value1.value = true
				}
			}).catch(err => {
				console.log(err);
			})
		}
		request.get('District/lists', {
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res);
			const data=res.data
			columns.value[0].push(...data); 
			columns.value[1].push(...columns.value[0][0].son); 
			columns.value[2].push(...columns.value[1][0].son);
			
			
			
			console.log(columns.value);
		}).catch(err => {
			console.log(err);
		})
	})
	let num = ref(0)
	let name = ref()
	let phone = ref()
	let city = ref()
	let addres = ref()
	let venueId = ref('')
	let token = ref()
	let show = ref(false)
	let area=ref()
	const columns = ref([
	  [],
	  [],
	  // []
	]);
	let value1 = ref(false)
	const showcity = () => {
		show.value = true
	}
	const cancel = () => {
		show.value = false
	}
	const close=()=>{
		show.value=false
	}
	const moren = () => {
		if (value1.value) {
			num.value = 1
			console.log(num.value);
		} else {
			num.value = 0
			console.log(num.value);
		}
	}
	const delress = () => {
		if (venueId.value != '') {
			request.post('Transport/delete', {
				data: {
					id: venueId.value
				},
				header: {
					"token": token.value
				}
			}).then(res => {
				console.log(res);
				uni.navigateBack()
			}).catch(err => {
				console.log(err);
			})
		}

	}
	const addrecity = () => {
		const reg = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/
		if(name.value==''){
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
		} else if(!reg.test(phone.value)){
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
		} else if(city.value==''){
			uni.showToast({
				title: '请选择地区',
				icon: 'none'
			})
		} else if(addres.value==''){
			uni.showToast({
				title: '请输入详细信息',
				icon: 'none'
			})
		}else{
			request.post('Transport/address', {
				data: {
					mobile: phone.value,
					area: area.value,
					address: addres.value,
					realname: name.value,
					status: num.value,
					id:venueId.value
				},
				header: {
					"token": token.value
				}
			}).then(res => {
				console.log(res);
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},2000)
			}).catch(err => {
				console.log(err);
			})
		}
		
	}
const uPickerRef = ref()
const distChangeHandler = (item) => {
	// console.log(1111);
    const { columnIndex, value,index } = item;
	console.log(item);
    let city = value[0].son;
	// console.log(city);
	// console.log(city[0].son);
	if(columnIndex === 0 && city[index].son==""){
		uPickerRef.value.setColumnValues(1, city);
	}else if (columnIndex === 0 && city[index].son!="") {
      uPickerRef.value.setColumnValues(1, city);
      uPickerRef.value.setColumnValues(2, city[0].son);
    }else if (columnIndex === 1 && city[index].son!="") {
      uPickerRef.value.setColumnValues(2, city[index].son);
    }
  };
const confirm = (e) => {
  console.log('confirm', e);
  if(e.value.length==2){
	  console.log(e.value[1].cid);
	  area.value=e.value[1].cid
	  city.value=`${e.value[0].name}  ${e.value[1].name} `
  }else if(e.value.length==3){
	  console.log(e.value[2].cid);
	  area.value=e.value[2].cid
	  city.value=`${e.value[0].name}  ${e.value[1].name}  ${e.value[2].name}`
  }
  show.value = false;
};
</script>

<style scoped>
	.infobox {
		width: 100%;
		height: 150rpx;
		border-bottom: 1px solid #eaeaea;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.infoname {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.infocity {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.inforess {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.sares {
		width: 690rpx;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 200rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background-color: #10c696;
		border-radius: 50rpx;
	}

	.sares1 {
		width: 690rpx;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		line-height: 90rpx;
		text-align: center;
	}
</style>